<!-- 
  @name: 加注详情
  @date: 2020.1.10
 -->
<template>
	<view class="content">
		<!-- 个人信息 -->
		<view class="person">
			<view class="info">
				<image class="img" :src="info.userPhoto"></image>
				<view class="msg">
					<view>{{info.userName}}</view>
					<view class="t2">{{info.userPhone}}</view>
				</view>
			</view>
			<view class="total">
				<view class="item">
					<text class="text">加注量</text>
					<text class="num">{{info.actualNum}}kg</text>
				</view>
				<view class="item">
					<text class="text">加注金额</text>
					<text class="icon">￥</text>
					<text class="num">{{info.moneyPay}}</text>
				</view>
			</view>
		</view>
		
		<!-- 订单 -->
		<view class="order">
			<view class="item">
				<text class="left">订单编号：</text><text>{{info.recordCode}}</text>
			</view>
			<view class="item">
				<text class="left">付款方式：</text>
				<text v-if="info.payType === 'payonline'">微信支付</text>
				<text v-else-if="info.payType === 'payfree'">免单支付</text>
				<text v-else-if="info.payType === 'paycard'">储值卡支付</text>
				<text v-else-if="info.payType === 'paybalance'">账户余额支付</text>
				<text v-else-if="info.payType === 'teambalance'">团队余额支付</text>
				<text v-else>其他支付</text>
			</view>
		</view>
		
		<!-- 加注信息 -->
		<view class="order">
			<view class="item">
				<text class="left">加注地点：</text><text>{{info.siteName}}</text>
			</view>
			<view class="item">
				<text class="left">加注车辆：</text><text>{{info.carNumber}}</text>
			</view>
			<view class="item">
				<text class="left">加注时间：</text><text>{{info.fillTime}}</text>
			</view>
		</view>
		
		<!-- 登录提示 -->
		<sign-in @submit="getInfo"></sign-in>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				recordId: 0,  //记录id
				info: {},  //记录详情
			}
		},
		onLoad(e) {
			this.recordId = e.recordId;
			this.getInfo();
		},
		methods: {
			//获取详情
			getInfo() {
				this.$http({
					url: this.$api.recordUrl + 'getrecorddetail',
					data: {
						recordId: this.recordId
					}
				}).then(res => {
					this.info = res;
				});
			}
		}
	}
</script>

<style lang="scss">
	/* 个人信息 */
	.person {
		width: 750rpx;
		padding: 40rpx 30rpx;
		background-color: $color-white;
		.info {
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			.img {
				width: 78rpx;
				height: 78rpx;
				border-radius: $border-radius-circle;
			}
			.msg {
				margin-left: 21rpx;
				.t2 {
					margin-top: 21rpx;
				}
			}
		}
		.total {
			margin-top: 66rpx;
			display: flex;
			flex-direction: row;
			.item {
				flex: 1;
				.text {
					margin-right: 14rpx;
					font-size: 20rpx;
					color: $color-grey-dark;
				}
				.num {
					font-size: 50rpx;
					font-family: $font-family-num;
				}
				.icon {
					font-size: 38rpx;
				}
			}
		}
	}
	
	/* 订单 */
	.order {
		margin-top: $spacing-col;
		width: 750rpx;
		padding: 7rpx 30rpx;
		background-color: $color-white;
		.item {
			width: 100%;
			padding: 23rpx 0;
			display: flex;
			flex-direction: row;
			.left {
				flex: 1;
				color: $color-grey;
			}
		}
	}
</style>
